﻿<!DOCTYPE html>
<html>
 <head> 
  <!--<meta charset="utf-8" /> -->
  <meta name="viewport" content="width=device-width, initial-scale=1.0" /> 
  <title>首页</title>

  <!-- logo --> 
  <link rel="shortcut icon" href="favicon.ico" /> 
  <link href="css/bootstrap.min.css" rel="stylesheet" /> 
  <!-- 图标 --> 
  <link href="font-awesome/css/font-awesome.css" rel="stylesheet" /> 
  <!-- 动画 --> 
  <link href="css/animate.css" rel="stylesheet" /> 
  <!-- 自定义样式 --> 
  <link href="css/style.css" rel="stylesheet" /> 
  <!-- 复选框 --> 
  <link href="css/plugins/iCheck/custom.css" rel="stylesheet" /> 
  <!-- 树结构 --> 
  <link href="css/plugins/jsTree/style.min.css" rel="stylesheet" /> 
  <!-- 分页 --> 
  <link rel="stylesheet" href="css/jquery.pagination.css" /> 
  <!-- 上传 --> 
  <link href="css/plugins/dropzone/basic.css" rel="stylesheet" /> 
  <link href="css/plugins/dropzone/dropzone.css" rel="stylesheet" /> 
  <!-- 标签 --> 
  <link href="css/plugins/bootstrap-tagsinput/bootstrap-tagsinput.css" rel="stylesheet" /> 
  <!-- 表格 -->

  <link href="css/plugins/footable/footable.core.css" rel="stylesheet" /> 
  <link href="css/plugins/dataTables/datatables.min.css" rel="stylesheet" /> 
  <link href="css/plugins/jasny/jasny-bootstrap.min.css" rel="stylesheet" /> 
  <link href="css/plugins/codemirror/codemirror.css" rel="stylesheet" />
  <!-- 时间 -->
  <link href="css/plugins/datapicker/datepicker3.css" rel="stylesheet">
  <link href="css/plugins/cropper/cropper.min.css" rel="stylesheet">
 </head> 
 <body> 
  <div id="wrapper"> 
   <!-- 侧边栏开始 --> 
   <nav class="navbar-default navbar-static-side" role="navigation"> 
    <div class="sidebar-collapse"> 
     <ul class="nav metismenu" id="side-menu"> 
     </ul> 
    </div> 
   </nav> 
   <!-- 侧边栏结束 --> 
   <div id="page-wrapper" class="gray-bg"> 
    <!-- 导航栏 --> 
    <div class="row wrapper border-bottom white-bg page-heading"> 
     <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3"> 
      <h3 class="l_title">首页</h3> 
     </div> 
     <div class="col-lg-7 col-md-7 col-xs-7 col-sm-7"> 

     </div> 
     <div class="col-lg-2 col-md-2 col-xs-2 col-sm-2">
      <ul class="nav navbar-top-links navbar-right">

       <li class="dropdown"> <a class="dropdown-toggle count-info" data-toggle="dropdown" href="#"> <i class="fa fa-ellipsis-v"></i> </a>
        <ul class="dropdown-menu dropdown-messages">
         <li id="mmxg"> <a href="houtai.html"><i class="fa fa-gears (alias)"></i> <span>后台管理</span> </a></li>
         <li class="divider"></li>
         <li onclick="logout()"> <a href="#"><i class="fa fa-sign-out"></i> <span>退出</span> </a></li>
        </ul> </li>
      </ul>
     </div> 
    </div> 
    <!-- 导航栏结束 --> 
    <!-- 主要内容 --> 
    <div class="wrapper wrapper-content row"> 
        <div class="row main-content">
        
        <div class="col-md-6 col-lg-6 col-xs-6 col-sm-6 col-sm-offset-4" >
          <h1><strong>电子证照共享服务系统</strong></h1>
        </div>
        </div>
       <div class="row bottom-distance"> 
       
        <div class="col-lg-12 col-md-12 col-xs-12 col-sm-12">
         <div class="ibox float-e-margins">
          <div class="form-inline ibox-title">
           <h3 class="col-lg-3 col-md-3 col-xs-3 col-sm-3 m-b">路由表<span id="id_lyb"></span></span></h3>

           <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 m-b" >
            <label class="l_i ">开始日期</label>
            <input id="begin_date" type="text" class="form-control" readonly="readonly" style="background: transparent;" data-date-format="yyyy-mm-dd" value="" />
           </div>
           <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 m-b">
            <label class="l_i">结束日期</label>
            <input id="end_date" type="text" class="form-control" readonly="readonly" style="background: transparent" data-date-format="yyyy-mm-dd" value=""/>
           </div>
           <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3 m-b">
             <button type="button" class="btn btn-primary" onclick="queryByTime()">查询</button>
           </div>

          </div> 
          <div class="ibox-content"> 
           <div> 
            <div id="lybChart" style="height: 500px;width: 100%"></div>
           </div> 
          </div> 
         </div>
        </div>
        <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">
         <div class="ibox float-e-margins">
          <div class="ibox-title">
           <h3>注册记录<span id="id_fwjl1"></span></h3>
          </div>
          <div class="ibox-content">
           <div>
            <div id="fwjlChart1" style="height: 300px"></div>
           </div>
          </div>
         </div>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">
         <div class="ibox float-e-margins">
          <div class="ibox-title">
           <h3>修改记录<span id="id_fwjl2"></span></h3>
          </div>
          <div class="ibox-content">
           <div>
            <div id="fwjlChart2" style="height: 300px"></div>
           </div>
          </div>
         </div>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">
         <div class="ibox float-e-margins">
          <div class="ibox-title">
           <h3>查询记录<span id="id_fwjl3"></span></h3>
          </div>
          <div class="ibox-content">
           <div>
            <div id="fwjlChart3" style="height: 300px"></div>
           </div>
          </div>
         </div>
        </div>

        <div class="col-lg-3 col-md-3 col-xs-3 col-sm-3">
         <div class="ibox float-e-margins">
          <div class="ibox-title">
           <h3>验证记录<span id="id_fwjl4"></span></h3>
          </div>
          <div class="ibox-content">
           <div>
            <div id="fwjlChart4" style="height: 300px"></div>
           </div>
          </div>
         </div>
        </div>
        </div>
    </div> 
    <!-- 页脚开始 --> 
    <div class="footer">     
    </div> 
    <!-- 页脚结束 --> 
   </div> 
   <!-- 右侧内容结束 -->
  </div> 
  <!--弹窗--> 
  <div id="dialog"></div> 
  <!-- Mainly scripts --> 
  <script src="js/jquery-3.1.1.min.js"></script>
  <script src="js/addHtml.js"></script>
  <script src="js/bootstrap.min.js"></script> 
  <script src="js/plugins/metisMenu/jquery.metisMenu.js"></script> 
  <script src="js/plugins/slimscroll/jquery.slimscroll.min.js"></script> 
  <!-- Custom and plugin javascript --> 
  <script src="js/inspinia.js"></script> 
  <script src="js/plugins/pace/pace.min.js"></script> 
  <script src="js/plugins/jsTree/jstree.min.js"></script> 
  <!-- Mainly scripts -->
  <script src="js/plugins/dataTables/datatables.min.js"></script>
  <!-- Peity -->
  <script src="js/plugins/peity/jquery.peity.min.js"></script>
  <!-- FooTable -->
  <script src="js/plugins/dataTables/datatables.min.js"></script>
  <!-- iCheck -->
  <script src="js/plugins/iCheck/icheck.min.js"></script>
  <!-- Peity -->
  <script src="js/demo/peity-demo.js"></script> 
  <script src="js/jquery.pagination.min.js"></script> 
  <!-- DROPZONE --> 
  <script src="js/plugins/dropzone/dropzone.js"></script> 
  <!-- ChartJS--> 
  <script src="js/plugins/chartJs/Chart.min.js"></script> 
  <script src="js/plugins/bootstrap-tagsinput/bootstrap-tagsinput.js"></script>
  <script src="js/plugins/datapicker/bootstrap-datepicker.js"></script>
  <!-- 自定义js --> 
  <script src="js/other.js"></script>
  <!--echarts-->
  <script src="js/echarts.js"></script>
  <script type="text/javascript">
  // 展示数据将
  </script>

  <style>
    .jstree-open > .jstree-anchor > .fa-folder:before {
        content: "\f07c";
    }

    .jstree-default .jstree-icon.none {
        width: 0;
    }
  </style>
  <script type="text/javascript">

      $(document).ready(function(){
          $("[name='all_user_name_show']").text(getUserObjVal().adminName)

          $('#begin_date').datepicker({
              todayBtn: "linked",
              keyboardNavigation: false,
              forceParse: false,
			  endDate:new Date(),
              calendarWeeks: true,
              autoclose: true
          }).on('changeDate', function(e) {
              if(e.date){
                  $('#end_date').datepicker('setStartDate', new Date(e.date.valueOf()))
              }else{
                  $('#end_date').datepicker('setStartDate',null);
              }
          });

          $('#end_date').datepicker({
              todayBtn: "linked",
              keyboardNavigation: false,
			  endDate:new Date(),
              forceParse: false,
              calendarWeeks: true,
              autoclose: true
          }).on('changeDate', function(e) {
              if(e.date){
                  $('#begin_date').datepicker('setEndDate', new Date(e.date.valueOf()))
              }else{
                  $('#begin_date').datepicker('setEndDate',new Date());
              }
          });
          $(".dropdown-menu").click(function(){
              event.stopPropagation();
          })
          var myDate=new Date();
          myDate.getYear();        // 获取当前年份(2位)
          myDate.getFullYear();    // 获取完整的年份(4位,1970-????)
          myDate.getMonth();       // 获取当前月份(0-11,0代表1月)
          myDate.getDate();        // 获取当前日(1-31)
          myDate.getTime();        // 获取当前时间(从1970.1.1开始的毫秒数)
          myDate.getMilliseconds();    // 获取当前毫秒数(0-999)
          myDate.toLocaleDateString();     // 获取当前日期
          var mytime=myDate.toLocaleTimeString();     // 获取当前时间
          myDate.toLocaleString( );        // 获取日期与时间


          Date.prototype.Format = function (fmt) { // author: meizz
              var o = {
                  "M+": this.getMonth() + 1, // 月份
                  "d+": this.getDate(), // 日
              };
              if (/(y+)/.test(fmt))
                  fmt = fmt.replace(RegExp.$1, (this.getFullYear() + "").substr(4 - RegExp.$1.length));
              for (var k in o)
                  if (new RegExp("(" + k + ")").test(fmt)) fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));
              return fmt;
          }


          var times = myDate.Format("yyyy-MM-dd");
          $("#end_date").val(times)


          $.ajax({
              type:"post",
              url:httpUrl+"account/loginCount",
              data:'{"beginTime":"","endTime":""}',
              dataType:'json',
              contentType: 'application/json;charset=utf-8',
              success:function (res){
                  if(res.code==200 && res.state==0){
                  	  $("#begin_date").val(res.data.chartRouteX[0]);
                      loadLYBInfos(res.data.chartRouteY.size,res.data.chartRouteX,res.data.chartRouteY.list);
                      loadFWRZInfos("fwjlChart1","id_fwjl1",res.data.chartAccessY1.size,res.data.chartAccessX,res.data.chartAccessY1.list);
                      loadFWRZInfos("fwjlChart2","id_fwjl2",res.data.chartAccessY2.size,res.data.chartAccessX,res.data.chartAccessY2.list);
                      loadFWRZInfos("fwjlChart3","id_fwjl3",res.data.chartAccessY3.size,res.data.chartAccessX,res.data.chartAccessY3.list);
                      loadFWRZInfos("fwjlChart4","id_fwjl4",res.data.chartAccessY4.size,res.data.chartAccessX,res.data.chartAccessY4.list);
                  }else{
                      alert(res.message);
                  }
              }

          })
      })


   //渲染路由表数据
   function loadLYBInfos(size,Xdata,Ydata){
       var myChartLYB = echarts.init(document.getElementById("lybChart"));
       $("#id_lyb").html("（"+size+"）")
       //路由表折线图
       optionLYB = {
           tooltip: {
               trigger: 'item',
               formatter: "{b}: {c}"
           },
           dataZoom: [{
               startValue: '2028-11-27'
           }, {
               type: 'inside'
           }],
           xAxis: {
               type: 'category',
               axisLabel:{
                   interval:0,//横轴信息全部显示
                   //rotate:-90,//-30度角倾斜显示
               },
               data: Xdata
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: Ydata,
               type: 'line',
               smooth: true
           }]
       };
       myChartLYB.setOption(optionLYB);
   }

   //渲染访问记录数据
   function loadFWRZInfos(echartsDIVName,spanName,size,Xdata,Ydata){
       var myChartFWRZ = echarts.init(document.getElementById(echartsDIVName));
       $("#"+spanName).html("（"+size+"）")
       //访问日志饼状图
       optionFWRZ = {
           tooltip: {
               trigger: 'item',
               formatter: "{b}: {c}"
           },
           xAxis: {
               type: 'category',
               axisLabel:{
                   interval:0,//横轴信息全部显示
                   //rotate:-90,//-30度角倾斜显示
               },
               data: Xdata
           },
           yAxis: {
               type: 'value'
           },
           series: [{
               data: Ydata,
               type: 'line'
           }]
       };
       myChartFWRZ.setOption(optionFWRZ);
   }




   //授权账号条状图
   /*optionSQZH = {
    color:['#9a06f7'],
    tooltip: {
        trigger: 'item',
        formatter: "{b}: {c} "
    },
    xAxis: {
        type: 'category',
        axisLabel:{
            interval:0,//横轴信息全部显示
            //rotate:-90,//-30度角倾斜显示
        },
        data: ['Jan', 'Feb', 'Mar', 'Apr', 'May', 'June', 'July','Aug','Sept','Oct','Nov','Dec']
   },
   yAxis: {
        type: 'value'
   },
   series: [{
       data: [120, 200, 150, 80, 70, 110, 130,20,30,50,144,30],
       /!*itemStyle: {
           normal: {
               label: {
                   show: true, //开启显示
                   position: 'top', //在上方显示
                   textStyle: { //数值样式
                       color: 'black',
                       fontSize: 8
                   }
               }
           }
       },*!/
       type: 'bar'
   }]
   };
   var myChartSQZH = echarts.init(document.getElementById('sqzhChart'));
   myChartSQZH.setOption(optionSQZH);*/


   //根据时间段查询
   function queryByTime(){
       var beginTime = $("#begin_date").val();
       var endTime = $("#end_date").val();
       $.ajax({
           type:"post",
           url:httpUrl+"account/loginCount",
           data:'{"beginTime":"'+beginTime+'","endTime":"'+endTime+'"}',
           dataType:'json',
           contentType: 'application/json;charset=utf-8',
           success:function (res){
               if(res.code==200 && res.state==0){
                   loadLYBInfos(res.data.chartRouteY.size,res.data.chartRouteX,res.data.chartRouteY.list);
                   loadFWRZInfos();
               }else{
                   alert(res.message);
               }
           }

       })

   }




  </script>
</body>
</html>